<template>
	<view class="content">
		<!-- 轮播和搜索 -->
		<view class="banner-search">
			<!-- 轮播 -->
			<view class="banner">
				<view class="uni-padding-wrap">
					<view class="page-section swiper">
						<view class="page-section-spacing">
							<swiper class="swiper" :indicator-dots="indicatorDots" :autoplay="autoplay" :interval="interval" :duration="duration">
								<swiper-item v-for="item in bannerArr" :key="item.id">
									<view class="swiper-item uni-bg-red"><image :src="item.imgUrl"></image></view>
								</swiper-item>
							</swiper>
						</view>
					</view>
				</view>
			</view>

			<!-- 搜索 -->
			<view class="search">
				<view class="search-content">
					<image src="../../static/imgs/search-o.png"></image>
					<text>搜索美食，菜谱</text>
				</view>
			</view>
		</view>

		<!-- item-list -->
		<view class="item-list">
			<view class="list-li" v-for="(item,index) in itemListArr" :key="item.id" @tap="navTo(index)">
				<image :src="item.imgUrl"></image>
				<text>{{ item.text }}</text>
			</view>
		</view>

		<!-- 婚庆 -->
		<view class="wedding-celebration"><image src="../../static/imgs/婚庆入口图.png"></image></view>

		<!-- 分割线 -->
		<view class="view-hr"></view>

		<!-- 优选名厨 -->
		<view class="optimize">
			<view class="title-img"><image src="../../static/imgs/title-名厨优选.png"></image></view>
			<view class="info">
				<view class="optimize-info" v-for="item in optimizeInfo" :key="item.id">
					<image class="info-img" :src="item.imgUrl"></image>
					<text>{{ item.name }}</text>
					<view class="star">
						<template v-for="imgs in item.star">
							<image class="star-img" :src="item.starImgurl"></image>
						</template>
					</view>
				</view>
			</view>
			<text>更多名厨</text>
		</view>

		<!-- 分割线 -->
		<view class="view-hr"></view>

		<!-- 优选餐宴 -->
		<view class=" banquet">
			<view class="title-img"><image src="../../static/imgs/title-优选餐宴.png"></image></view>

			<view class="uni-padding-wrap">
				<view class="page-section swiper">
					<view class="page-section-spacing">
						<swiper class="swiper" :interval="interval" :duration="duration" :display-multiple-items="2" :next-margin="50">
							<swiper-item class="optimize-info" v-for="item in banquet" :key="item.id">
								<view class="optimize-info-item">
									<image class="info-img" :src="item.imgUrl"></image>
									<text class="name">{{ item.name }}</text>
									<text class="price">{{ item.price }}</text>
								</view>
							</swiper-item>
						</swiper>
					</view>
				</view>
			</view>
			<text class="more">更多名厨</text>
		</view>

		<!-- 分割线 -->
		<view class="view-hr"></view>
		
		<!-- 质量 -->
		<view class="quality ">
			<view class="quality-ui">
				<view class="quality-li" v-for="item in quality" :key="item.id">
				<image :src="item.imgUrl"></image>
				<view class="quality-content">
					<text>{{item.title}}</text>
					<text>{{item.text}}</text>
				</view>
			</view>
			</view>
		</view>
	
		<!-- 宣传标语图 -->
		<view class="management">
			<image src="../../static/imgs/宣传标语图.png"></image>
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			indicatorDots: true,
			autoplay: true,
			interval: 2000,
			duration: 500,

			//  轮播
			bannerArr: [
				{
					id: '01',
					imgUrl: '../../static/imgs/婚庆banner.png'
				},
				{
					id: '02',
					imgUrl: '../../static/imgs/服务员加盟banner.png'
				},
				{
					id: '03',
					imgUrl: '../../static/imgs/厨师加盟banner.png'
				},
				{
					id: '04',
					imgUrl: '../../static/imgs/banner.png'
				}
			],
			// item-list
			itemListArr: [
				{
					id: '001',
					imgUrl: '../../static/imgs/icon-餐宴.png',
					text: '餐宴'
				},
				{
					id: '002',
					imgUrl: '../../static/imgs/icon-名厨.png',
					text: '名厨'
				},
				{
					id: '003',
					imgUrl: '../../static/imgs/icon-坝坝宴.png',
					text: '坝坝宴'
				},
				{
					id: '004',
					imgUrl: '../../static/imgs/icon-餐饮.png',
					text: '餐饮'
				}
			],

			// 优选名厨
			optimizeInfo: [
				{
					id: '012',
					imgUrl: '../../static/imgs/other/img10.png',
					name: '王大牛',
					starImgurl: '../../static/imgs/star-c.png',
					star: 5
				},
				{
					id: '013',
					imgUrl: '../../static/imgs/other/img10.png',
					name: '王大牛',
					starImgurl: '../../static/imgs/star-c.png',
					star: 5
				},
				{
					id: '014',
					imgUrl: '../../static/imgs/other/img10.png',
					name: '王大牛',
					starImgurl: '../../static/imgs/star-c.png',
					star: 5
				}
			],

			// 优选餐宴
			banquet: [
				{
					id: '016',
					imgUrl: '../../static/imgs/other/img7.png',
					name: '盛夏海鲜家宴',
					price: '1299/桌'
				},
				{
					id: '017',
					imgUrl: '../../static/imgs/other/img7.png',
					name: '盛夏海鲜家宴',
					price: '1299/桌'
				},
				{
					id: '018',
					imgUrl: '../../static/imgs/other/img8.png',
					name: '盛夏海鲜家宴',
					price: '1299/桌'
				}
			],
			
			
			// 质量保障
			quality:[
				{
					"id": '2121',
					"imgUrl":'../../static/imgs/icons-信用保障.png',
					"title":'信用保证',
					"text":'服务到位，准时达到'
				},
				{
					"id": '1233',
					"imgUrl":'../../static/imgs/icons-认证服务商.png',
					"title":'信用保证',
					"text":'服务到位，准时达到'
				},
				{
					"id": '3412',
					"imgUrl":'../../static/imgs/icons-品质服务.png',
					"title":'信用保证',
					"text":'服务到位，准时达到'
				},
				{
					"id": '3522',
					"imgUrl":'../../static/imgs/icons-安全保障.png',
					"title":'信用保证',
					"text":'服务到位，准时达到'
				}
			]
		
		
		
		};
	},
	onLoad() {},
	methods: {
		navTo(i){
			console.log(i);
			if(i === 0){
				uni.navigateTo({
					url:'/pages/banquet/banquet'
				})
			}
			if(i === 1){
				uni.navigateTo({
					url:'/pages/cook/cook'
				})
			}
			if(i === 2){
				uni.navigateTo({
					url:'/pages/courtyardBanquet/courtyardBanquet'
				})
			}
			if(i === 3){
				uni.navigateTo({
					url:'/pages/surround/surround'
				})
			}
			
		}
	}
};
</script>

<style lang="scss"  scoped>
.content-padding {
	padding: 0 40rpx;
	box-sizing: border-box;
}

.view-hr {
	width: 100%;
	height: 20rpx;
	background-color: #efefef;
}

.content {
	// 轮播和搜索
	.banner-search {
		position: relative;

		// 轮播
		.banner {
			height: 380rpx;

			/deep/ .swiper {
				height: 380rpx;
			}

			image {
				width: 100%;
				height: 380rpx;
			}
		}

		//搜索
		.search {
			padding: 0 40rpx;
			box-sizing: border-box;
			height: 90rpx;
			width: 100%;
			position: absolute;
			bottom: -45rpx;

			.search-content {
				height: 100%;
				background: #fff;
				display: flex;
				align-items: center;
				justify-content: center;
				border-radius: 45rpx;
				box-shadow: 5rpx 5rpx 5rpx #ccc;

				image {
					width: 34rpx;
					height: 34rpx;
					// 图片与文字局中
					vertical-align: middle;
					margin-right: 20rpx;
				}

				text {
					font-size: 28rpx;
					color: #999;
				}
			}
		}
	
	
	}

	// item
	.item-list {
		margin-top: 50rpx;
		padding: 40rpx 40rpx;
		box-sizing: border-box;
		display: flex;
		align-items: center;
		justify-content: space-between;

		.list-li {
			display: flex;
			flex-direction: column;
			justify-content: center;
			align-items: center;

			image {
				width: 107rpx;
				height: 107rpx;
			}

			text {
				margin-top: 10rpx;
			}
		}
	}

	// 婚庆
	.wedding-celebration {
		padding: 0 40rpx 40rpx;
		box-sizing: border-box;

		image {
			width: 100%;
			height: 300rpx;
		}
	}

	// 优选名厨
	.optimize {
		.title-img {
			width: 466rpx;
			height: 94rpx;
			margin: 50rpx auto;
			image {
				width: 100%;
				height: 100%;
			}
		}

		.info {
			display: flex;
			align-items: cener;
			justify-content: space-between;
			padding: 0 40rpx 40rpx;
			box-sizing: border-box;

			.optimize-info {
				display: flex;
				flex-direction: column;
				align-items: center;
				justify-content: center;
				width: 210rpx;
				height: 247rpx;
				box-shadow: 0rpx 0rpx 10rpx #ccc;
				border-radius: 10rpx;
				.info-img {
					width: 100rpx;
					height: 100rpx;
					margin-bottom: 20rpx;
				}
				.star {
					width: 140rpx;
					display: flex;
					align-items: center;
					justify-content: space-around;
					.star-img {
						width: 24rpx;
						height: 24rpx;
					}
				}
			}
		}
		text {
			display: flex;
			align-items: center;
			justify-content: center;
			color: #999;
			padding-bottom: 40rpx;
		}
	}

	// 优选餐宴
	.banquet {
		.title-img {
			width: 466rpx;
			height: 36rpx;
			margin: 50rpx auto;
			image {
				width: 100%;
				height: 100%;
			}
		}

		/deep/ .swiper {
			height: 320rpx;
		}

		.optimize-info {
			padding: 0 20rpx;
			box-sizing: border-box;
			width: 320rpx;
			height: 900rpx;
			padding-bottom: 6rpx;
			.optimize-info-item {
				height: 100%;
				border-radius: 10rpx;
				box-shadow: 0 0 10rpx #ccc;
				display: flex;
				flex-direction: column;
				.info-img {
					width: 100%;
					height: 190rpx;
					border-top-left-radius: 10rpx;
					border-top-right-radius: 10rpx;
				}
				.name,
				.price {
					text-align: left;
					margin-left: 10rpx;
					margin-top: 10rpx;
				}
				.price {
					color: #f0ad4e;
				}
			}
		}

		.more {
			display: flex;
			align-items: center;
			justify-content: center;
			padding: 40rpx 0;
			color: #999;
		}
	}
	
	// 质量
	.quality{
		margin-bottom: 40rpx;
		.quality-ui{
			display: flex;
			flex-wrap: wrap;
			width: 100%;
		}
		.quality-li{
			display: flex;
			width: 50%;
			border-bottom: 1px solid #efefef;
			border-right: 1px solid #efefef;
			padding: 40rpx 20rpx;
			box-sizing: border-box;
			image{
				width: 70rpx;
				height: 70rpx;
				vertical-align: middle;
				margin-right: 20rpx;
			}
			.quality-content{
				display: flex;
				flex-direction: column;
				text:nth-child(1){
					color: #666;
				}
				text:nth-child(2){
					color: #999;
					font-size: 24rpx;
				}
			}
			
		}
		.quality-li:nth-child(2n){
			border-right: none;
		}
		// .quality-li:nth-child(3),.quality-li:nth-child(4){
		// 	border-bottom: none;
		// }
	}


	// 宣传标语图
	.management{
		image{
			width: 100%;
			height: 400rpx;
		}
	}
	
}
</style>
